<template>
  <el-container class="layout-container-demo">
    <el-header style="background-color: #a2b5b1; height: 6vh">
      <div style="text-align: left; font-size: 28px">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        </el-radio-group>
        <span class="meituan-title">M B T I 问 卷 调 查 管 理 系 统</span>
      </div>
    </el-header>
    <el-container style="background-color: #dcdcdc; height: 83vh">
      <el-scrollbar>
        <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
          <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><eleme /></el-icon>
              <span>MBTI</span>
            </template> -->

          <!-- <el-menu-item-group> -->

          <el-menu-item
            index="1-1"
            @click="this.$router.push({ path: '/teststart' })"
            ><el-icon><Document /></el-icon>问卷作答</el-menu-item
          >

          <el-sub-menu index="1-2">
            <template #title
              ><span
                ><el-icon><InfoFilled /></el-icon>人格介绍</span
              ></template
            >

            <el-menu-item index="1-2-1" @click="this.$router.push('/INTJ')">
              INTJ-建筑师
            </el-menu-item>

            <el-menu-item index="1-2-2" @click="this.$router.push('/INTP')">
              INTP-逻辑学家
            </el-menu-item>

            <el-menu-item index="1-2-3" @click="this.$router.push('/ENTJ')">
              ENTJ-指挥者
            </el-menu-item>

            <el-menu-item index="1-2-4" @click="this.$router.push('/ENTP')">
              ENTP-辩论家
            </el-menu-item>

            <el-menu-item index="1-2-5" @click="this.$router.push('/INFJ')">
              INFJ-提倡者
            </el-menu-item>

            <el-menu-item index="1-2-6" @click="this.$router.push('/INFP')">
              INFP-调停者
            </el-menu-item>

            <el-menu-item index="1-2-7" @click="this.$router.push('/ENFJ')">
              ENFJ-主人公
            </el-menu-item>

            <el-menu-item index="1-2-8" @click="this.$router.push('/ENFP')">
              ENFP-竞选者
            </el-menu-item>

            <el-menu-item index="1-2-9" @click="this.$router.push('/ISTJ')">
              ISTJ-物流师
            </el-menu-item>

            <el-menu-item index="1-2-10" @click="this.$router.push('/ISFJ')">
              ISFJ-守卫者
            </el-menu-item>

            <el-menu-item index="1-2-11" @click="this.$router.push('/ESTJ')">
              ESTJ-总经理
            </el-menu-item>

            <el-menu-item index="1-2-12" @click="this.$router.push('/ESFJ')">
              ESFJ-执政官
            </el-menu-item>

            <el-menu-item index="1-2-13" @click="this.$router.push('/ISTP')">
              ISTP-鉴赏家
            </el-menu-item>

            <el-menu-item index="1-2-14" @click="this.$router.push('/ISFP')">
              ISFP-探险家
            </el-menu-item>

            <el-menu-item index="1-2-15" @click="this.$router.push('/ESTP')">
              ESTP-企业家
            </el-menu-item>

            <el-menu-item index="1-2-16" @click="this.$router.push('/ESFP')">
              ESFP-表演者
            </el-menu-item>
          </el-sub-menu>
          <!-- </el-menu-item-group> -->
          <!-- </el-sub-menu> -->

          <el-menu-item index="2" @click="this.$router.push('/select')">
            <el-icon class="el-icon-user"><user /></el-icon>
            <template #title>学生信息</template>
          </el-menu-item>

          <el-menu-item index="3" @click="this.$router.push('/view')">
            <el-icon><Search /></el-icon>
            <template #title>数据查询</template>
          </el-menu-item>

          <el-menu-item index="4" @click="this.$router.push('/tips')">
            <el-icon><Sunny /></el-icon>
            <template #title>可视化</template>
          </el-menu-item>

          <el-menu-item index="5" @click="this.$router.push('/login')">
            <el-icon ><SwitchButton /></el-icon>
            <template #title>退出</template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>

      <el-main
        ><el-scrollbar>
          <div>
            <!-- <el-row type="flex" justify="center">
              <el-col :span="1"></el-col>
            </el-row> -->
            <!-- <el-row type="flex" justify="center"> -->
              <el-col :span="18.5">
                <el-card class="card1">
                  <router-view />
                </el-card>
              </el-col>
            <!-- </el-row> -->
          </div
        ></el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ref } from "vue";

export default {
  name: "index",
  data() {
    return {
      // pongStr: "",
    };
  },
  methods: {},
  setup() {
    const isCollapse = false;
    return { isCollapse };
  },
};
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  color: rgb(255, 255, 255);
}
.layout-container-demo .el-menu {
  border-right: none;
  color: rgb(255, 255, 255);
}
.layout-container-demo .el-main {
  padding: 0;
  text-align: center;
  background-color: #ffffff;
  background-size: 100% 100%;
}

.layout-container-demo {
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  background-color: #dcdcdc;
}
.card1 {
  background-color: #ffffff;
  /* box-shadow: always; */
  height: 700px;
  width: 1050px;
  /* border-radius: 30px; */
}
.el-row {
  margin-bottom: 50px;
}
.image {
  width: 100%;
  display: block;
}
.meituan-title {
  font-weight: bold;
  margin-left: 450px;
  text-align: center;
  color: #f6f6f6;
  font-size: 30px;
  padding-top: 0px;
  font-family: Arial, Helvetica, sansserif;
}
.menuitem .el-menu-item_label {
  color: rgb(214, 91, 91);
}
</style>
